this
Recular function call : 純粹的調用 (Simple call)
直接調用函式,此函式的 this 會指向 global object (the window object in the broswer)
window.name = 'sui';
function callMyName() {
console.log(this.name);
}
callMyName();
// output : sui
// 直接調用 -> this 指向 window
於函式中,宣告其他函式
window.name = 'sui';
function callMyName () {
console.log(this.name);
// function in a function
function recallMyName () {
console.log(this.name);
}
recallMyName();
}
callMyName();
// output : sui
// output : sui
-> 只要呼叫函式,this 都是屬於全域 & 純粹的調用方式 this 都會指向 window
Method call : 物件的方法調用 (As an object method)
function callMyName() {
console.log(this.name);
}
var name = 'sui_global';
var me = {
name: 'sui_object',
callMyName: callMyName
}
callMyName() // output : sui_global
me.callMyName() // output : sui_object -> 透過物件呼叫 this指向物件內
小重點:
JavaScript 的 Window 物件讓用來存取和操作瀏覽器的視窗
透過直接 log 分辨 Recular function call 以及 Method call
測式直接 log
console.log(this);
// output : Window Object
Recular function call
window.name = 'sui';
function callMyName () {
// function in a function
function recallMyName () {
console.log(this);
}
recallMyName();
}
callMyName();
// output : Window Object
Method call
var me = {
name : 'sui',
age : 19,
caculateAge : function(){
console.log(this);
}
}
me.caculateAge();
// output : me Object
個人認為 this 看似簡單,但多爬文發現其時的沒有這麼容易,而且有時候還會搞混~
永遠記得大一上程式設計課,第一次看到 this ,大家滿頭問號,助教只說了一句
: this,就是 這個 的意思! ($#%^$#$,你是在上英文課嗎)
今天終於又把它看懂一些了~
新手練功中,如有錯誤觀念,歡迎指正,這次範例套用了一些別人文章以及課程的程式碼(有稍微調整),在此感謝各路高手!
課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 : https://blog.techbridge.cc/2019/02/23/javascript-this/
https://wcc723.github.io/javascript/2017/12/12/javascript-this/